<template>
  <div class="home-container">
    <el-col :span="12" style="text-align: right;">
      <el-button
          type="text"
          style="color: white; position: absolute; right: 20px; top: 15px;"
          @click="logout"
      >
        退出登录
      </el-button>
    </el-col>
    <el-container>
      <el-header style="background: #667eea; color: white; padding: 0 20px;">
        <h2 style="text-align: left; font-size: 36px; font-family: 'Arial Rounded MT Bold', sans-serif; color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);">布噜猫粮管理系统</h2>
        <el-row align="middle" style="height: 100%;">
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="200px" style="background-color: #f5f7fa;">
          <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @select="handleMenuSelect"
              style="overflow-x: hidden; overflow-y: auto; height: calc(100vh - 60px);"
          >
            <RecursiveMenu :menus="menus" />
          </el-menu>
        </el-aside>

        <el-main>
          <slot></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import RecursiveMenu from '@/components/RecursiveMenu.vue'

export default {
  components: {
    RecursiveMenu
  },
  props: {
    menus: {
      type: Array,
      required: true
    }
  },
  setup() {
    const router = useRouter()
    const menus = ref([])

    const fetchMenus = async () => {
      try {
        const response = await fetch('http://localhost:8090/menu/tree', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            pageNo: 1,
            pageSize: 1000,
            name: '',
            url: '',
            type: '',
            icon: '',
            sort: '',
            perms: '',
            componentName: ''
          })
        });

        const data = await response.json();
        // console.log('API 响应数据:', data); // 添加调试日志
        if (data.code == 200 && data.data) {
          menus.value = data.data; // 直接赋值，不再递归处理
          // console.log('处理后的菜单数据:', menus.value); // 添加调试日志
        } else {
          // console.error('获取菜单数据失败:', data.message);
        }
      } catch (err) {
        // console.error('获取菜单数据失败:', err);
      }
    };

    const handleMenuSelect = (path) => {
      router.push({ path })
    }

    const logout = () => {
      router.push('/login')
    }

    onMounted(() => {
      fetchMenus()
      console.log('Menus data:', menus.value) // 添加调试信息
    })

    return {
      menus,
      handleMenuSelect,
      logout
    }
  }
}
</script>

<style>
/* 禁止页面滚动 */
html, body {
  overflow: hidden;
}

.home-container {
  height: 100vh;
}

/* 自定义滚动条样式 */
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 1px; /* 滚动条宽度 */
}

.el-menu-vertical-demo::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景 */
}

.el-menu-vertical-demo::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滑块圆角 */
}

.el-menu-vertical-demo::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停颜色 */
}
</style>